<template>
	<view class="modification">
		<!-- 顶部固定 -->
		<view class="titlesHead">
			<view class="iconfont icon-fangxiang-xiangzuo icon" @tap="yun"></view>
			<view class="titname">
				乐 居
			</view>
			<view class="titRight"></view>
		</view>
		<view class="zhanwei">静安阿达</view>
		<!-- 修改按钮 -->
		<button type="mini" class="butt" @click="xiugai">修改信息</button>
		<!-- 头像 -->
		<view class="one" v-if="sho">
			<view class="portrait">
				<view class="namesser">
					头像
				</view>
				<view class="porpicn">
					<image :src="yonhu.icon" mode=""></image>
				</view>
			</view>
			<!-- 用户名 -->
			<view class="usname">
				<view class="namesser">
					用户名
				</view>
				<view class="propic">
					{{yonhu.nickname}}
				</view>
			</view>
			<!-- 昵称 -->
			<view class="usname">
				<view class="namesser">
					昵称
				</view>
				<view class="propic">
					{{yonhu.phone}}
				</view>
			</view>
			<!-- 手机号 -->
			<view class="usname">
				<view class="namesser">
					手机号
				</view>
				<view class="propic">
					{{yonhu.username}}
				</view>
			</view>
			<!-- 退出登录 -->
			<button type="mini" class="buon" @tap="gouLogin">退出登录</button>
		</view>
		<!-- 修改页面 -->
		<view class="two" v-if="!sho">
			<view class="portrait">
				<view class="namesser">
					头像
				</view>
				<view class="porpicn ">
					<button type="mini" @tap="shangchaun" class="mitou">上传头像</button>
				</view>
			</view>
			<!-- 用户名 -->
			<view class="usname">
				<view class="namesser">
					用户名
				</view>
				<view class="propic">
					<input type="text" v-model="nickname" :placeholder="yonhu.nickname" />

				</view>
			</view>
			<!-- 昵称 -->
			<view class="usname">
				<view class="namesser">
					昵称
				</view>
				<view class="propic">
					<input type="text" v-model="phone" :placeholder="yonhu.phone" />

				</view>
			</view>
			<!-- 手机号 -->
			<view class="usname">
				<view class="namesser">
					手机号
				</view>
				<view class="propic">
					<input type="text" v-model="username" :placeholder="yonhu.username" />

				</view>
			</view>
			<!-- 修改按钮 -->
			<button type="mini" class="but" @tap="genggai">更改信息</button>
		</view>
	</view>
</template>

<script>
	import {
		bufan
	} from '../../api/bufan.js'
	import {
		modificationList,
		gengxin
	} from '@/api/modification/modification.js'
	import {
		myList
	} from '@/api/my/my.js'
	export default {
		name: 'Modifica',
		data() {
			return {
				// 用户信息
				yonhu: {},
				img: "",
				nickname: '',
				sho: true,
				nickname: '',
				phone: '',
				username: ''
			};
		},
		methods: {
			// 点击箭头返回上一页
			yun() {
				uni.navigateBack({
					delta: 1,
				});
			},
			// 退出登录
			gouLogin() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
				uni.clearStorageSync()
			},
			// 点击上传头像
			shangchaun() {
				var that = this;
				uni.chooseImage({
					// count:1,
					sizeType: ['original '],
					sourceType: ['album '],
					success(res) {
						console.log(res)
						uni.uploadFile({
							// 选择图片后要上传到服务器上，变成网络地址，那样才有用
							url: bufan + `/lejuClient/login/uploadAvatar`,
							filePath: res.tempFilePaths[0],
							name: 'file',
							success(res) {
								// console.log(res)
								that.img = JSON.parse(res.data).data.fileUrl
							}
						})
					}
				})
			},
			// 点击修改信息按钮切换页面状态
			xiugai() {
				this.sho = !this.sho
			},
			// 点击修改信息
			genggai() {
				gengxin({
					"id": this.yonhu.id,
					"icon": this.img,
					"nickname": this.nickname,
					"phone": this.phone,
				}).then(res => {
					console.log(res)
					if (res.data.success) {
						uni.showToast({
							title: "修改成功 即将重新登录"
						})
						setTimeout(() => {
							// uni.reLaunch(OBJECT)
							// 返回上一个页面
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}, 2000)
					} else {
						uni.showToast({
							title: "登录失败，请重新登录",
							icon: 'error'
						})
					}
					// uni.navigateTo({
					// 	url:'/pages/login/login',
					// 	success(res){

					// 	}
					// })
				})
			}
		},

		onLoad() {
			myList().then(res => {
				console.log(res.data.data.userInfo)
				this.yonhu = res.data.data.userInfo
			})
		}
	}
</script>

<style lang="less" scoped>
	.modification {
		height: 100vh;
		background-color: #f4e8ab;

		// 头部固定位置
		.titlesHead {
			height: 100rpx;
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			color: white;
			display: flex;
			align-items: center;
			background-color: #135a05;

			.icon {
				flex: 1;
				padding-left: 40rpx;
				box-sizing: border-box;
			}

			.titname {
				flex: 3;
				text-align: center;
			}

			.titRight {
				flex: 1;
			}
		}

		// 头部固定后面占位置的盒子，不要删除哈
		.zhanwei {
			width: 100%;
			height: 100rpx;
			background-color: #135a05;
		}

		// 修改信息按钮
		.butt {
			width: 200rpx;
			height: 100rpx;
			transform: translateX(100%);
			margin-bottom: 30rpx;
		}

		.one {

			// 头像
			.portrait {
				padding: 0 30rpx;
				background-color: #fff9fa;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 4rpx solid #676767;
				box-sizing: border-box;

				.namesser {
					font-size: 32rpx;
				}

				.porpicn {
					width: 120rpx;
					height: 120rpx;
					margin: 20rpx 0;
					border-radius: 50%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
			}

			// 电话，昵称，用户名
			.usname {
				padding: 0 30rpx;
				font-size: 32rpx;
				height: 100rpx;
				background-color: #fff9fa;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 4rpx solid #676767;
			}
		}

		.two {

			// 头像
			.portrait {
				padding: 0 30rpx;
				background-color: #fff9fa;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 4rpx solid #676767;
				box-sizing: border-box;

				.namesser {
					font-size: 32rpx;
				}

				.porpicn {
					width: 220rpx;
					height: 100rpx;
					margin: 20rpx 0;

					.mitou {
						background-color: red;
					}
				}
			}

			// 电话，昵称，用户名
			.usname {
				padding: 0 30rpx;
				font-size: 32rpx;
				height: 100rpx;
				background-color: #fff9fa;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 4rpx solid #676767;

				.propic {
					width: 150rpx;
				}
			}
		}


		// 退出登录按钮
		.buon {
			margin-top: 200rpx;
			width: 400rpx;
			height: 100rpx;
			background-color: red;
		}

		.but {
			margin-top: 200rpx;
			width: 400rpx;
			height: 100rpx;
			background-color: red;
		}

	}
</style>
